/* eslint-disable import/no-duplicates */ /* eslint-disable import/no-duplicates */
<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 搜索 -->
        <el-form :model="companys" ref="form">
          <div class="filter-container">
            <el-row :gutter="20">
              <!--加数据-->

              <!--end-->
              <el-col :span="6">
                <el-form-item label="学科：" prop="tags">
                  <el-input @keyup.enter="hQuery" style="width: 180px;" placeholder="请输入" class="filter-item" v-model="form.subject"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="城市">
                  <MyCity v-model="form.provAndCity" />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="关键字：" prop="shortName">
                  <el-input v-model.trim="form.shortName" style="width: 180px;"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="状态：" prop="state">
                  <el-select class="filter-item" style="width: 100px;" v-model="form.state" clearable>
                    <el-option v-for="item in status" :key="item.value" :label="item.label" :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item>
                  <el-button :loading="isLoading" size="small" type="primary" @click="hQuery">查询</el-button>
                  <el-button size="small" @click="hResetForm">重置</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-form>
        <!-- 数据记录 -->
        <el-alert v-if="cResultTip" :title="cResultTip" type="info" class="alert" :closable="false" show-icon></el-alert>
        <!-- end -->
        <!-- 数据列表 -->
        <el-table :data="companys" v-loading="isLoading" element-loading-text="给我一点时间" fit highlight-current-row style="width: 100%" border>
          <el-table-column align="center" label="试题编号" width="70">
            <template slot-scope="scope">
              <span>{{ scope.row.number }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="学科">
            <template slot-scope="scope">
              <span>{{ scope.row.subject }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="目录">
            <template slot-scope="scope">
              <span>{{ scope.row.catalog }}</span>
            </template>
          </el-table-column>
          <el-table-column label="题型">
            <template #default="{row}">
              {{ formatFormOfEmployment(row.questionType) }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="题干">
            <template slot-scope="scope">
              <span>{{ scope.row.question }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="录入时间">
            <template slot-scope="scope">
              <span>{{ scope.row.addDate }}</span>
            </template>
          </el-table-column>
          <!--手动加的数据-->
          <el-table-column align="center" label="难度">
            <template #default="{row}">
              {{ formatFormOfEmployment2(row.difficulty) }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="录入人">
            <template slot-scope="scope">
              <span>{{ scope.row.creator }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="审核状态">
            <template #default="{row}">
              {{ formatFormOfEmployment3(row.chkState) }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="审核意见">
            <template slot-scope="scope">
              <span>{{ scope.row.chkRemarks }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="审核人">
            <template slot-scope="scope">
              <span>{{ scope.row.chkUser }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="发布状态">
            <template #default="{row}">
              {{ formatFormOfEmployment4(row.publishState) }}
            </template>
          </el-table-column>

          <!--手动加的数据end-->
          <el-table-column align="center" label="状态" width="80">
            <template slot-scope="scope">
              <span v-if="scope.row.state == 1">启用</span>
              <span v-else>禁用</span>
            </template>
          </el-table-column>
          <!-- 操作按钮 -->
          <el-table-column align="center" label="操作" width="280" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button type="primary" size="mini" @click="hEdit(scope.row.id)">编辑</el-button>
              <el-button type="primary" size="mini" @click="hSwitchStatus(scope.row)">
                <span>{{ scope.row.state === 0 ? '启用' : '禁用' }}</span>
              </el-button>
              <el-button v-if="scope.row.status != 'deleted'" size="mini" type="danger" @click="hDelete(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- end -->
        <!-- 分页 -->
        <div class="pagination" v-show="total">
          <div class="pages">
            <el-pagination background @size-change="hSizeChange" @current-change="hCurrentChange" :current-page="Number(form.page)" :total="Number(total)" :page-size="Number(form.pagesize)" :page-sizes="[10, 20, 30, 50]" layout="sizes, prev, pager, next, jumper"></el-pagination>
          </div>
        </div>
        <!-- end -->
      </el-card>

      <!-- 新增标签弹层

        把对话框留在父组件中，把对话框中的核心内容提出来，封装成一个组件。

        为什么不把对话框一起封装？
        (1) 便于复用。如果与对话框绑定了，则后期如果要单独拿做一个页面，则无法复用。
        (2) 对话框留在父组件，操作更方便。
      -->
      <el-dialog :title="cTitle" :visible.sync="isShowDialog" v-if="isShowDialog">
        <QuestionAdd ref="editUser" :companyId="curCompanyId" @close="isShowDialog = false" @refresh="loadCompanys"></QuestionAdd>
      </el-dialog>
    </div>
  </div>
</template>

<script>
// eslint-disable-next-line import/no-duplicates
import { status } from '@/api/hmmm/constants'
import { choice as getCompanys, remove, disabled } from '@/api/hmmm/questions.js'
import QuestionAdd from '@/module-hmmm/pages/questions-add.vue'
import MyCity from '@/module-hmmm/pages/companys/citys.vue'
// 数据字典
// eslint-disable-next-line import/no-duplicates
import { questionType, difficulty, chkState, publishState } from '@/api/hmmm/constants.js'

export default {
  name: 'CompanysList',
  components: {
    QuestionAdd,
    MyCity
  },
  data () {
    return {
      companys: [],
      total: 0,

      curCompanyId: null, // 区别于是否是编辑，还是添加

      isLoading: false,
      isShowDialog: false,

      // 查询表单中的参数
      form: {
        shortName: '',
        state: null,
        tags: '',
        provAndCity: {
          province: '',
          city: ''
        },
        page: 1,
        pagesize: 20
      }
      // 加级联表单数据
    }
  },
  // 创建完毕,做一次查询
  created () {
    this.loadCompanys()
  },
  computed: {
    status () {
      return status
    },
    cResultTip () {
      return `共 ${this.total} 条记录`
    },
    cTitle () {
      return this.curCompanyId ? '预览' : '添加'
    }
  },
  methods: {
    buildParams () {
      const paramsObj = {}
      const { page, pagesize, provAndCity, tags, state, subject } = this.form
      // 如果某一个参数是null,则axios就不会发这个参数
      // 如果某一个参数是""，axios是会发出这个参数
      paramsObj.page = page || null
      paramsObj.pagesize = pagesize || null
      paramsObj.tags = tags || null
      paramsObj.province = provAndCity.city || null
      paramsObj.city = provAndCity.city || null
      paramsObj.state = state === '' ? null : state
      paramsObj.subject = subject || null
      return paramsObj
    },
    // 数据字典
    formatFormOfEmployment (n) {
      const map = {}
      questionType.forEach(items => {
        map[items.value] = items.label
      })
      // 返回根据map获取到的码值，给模板渲染
      return map[n]
    },
    formatFormOfEmployment2 (n) {
      const map = {}
      difficulty.forEach(items => {
        map[items.value] = items.label
      })
      // 返回根据map获取到的码值，给模板渲染
      return map[n]
    },
    formatFormOfEmployment3 (n) {
      const map = {}
      chkState.forEach(items => {
        map[items.value] = items.label
      })

      // 返回根据map获取到的码值，给模板渲染
      return map[n]
    },
    formatFormOfEmployment4 (n) {
      const map = {}
      publishState.forEach(items => {
        map[items.value] = items.label
      })

      // 返回根据map获取到的码值，给模板渲染
      return map[n]
    },

    // 获取列表数据
    async loadCompanys () {
      this.isLoading = true
      // 构建查询参数
      const paramsObj = this.buildParams()

      try {
        const { data: res } = await getCompanys(paramsObj)
        // 获取数据给companys
        this.companys = res.items
        // 获取总条数
        this.total = res.counts

        this.isLoading = false
        console.log(this.companys)
      } catch (err) {
        console.log(err)
        this.isLoading = true
      }
    },
    // 重置整个表单
    hResetForm () {
      // el 表单组件上有一个resetFields方法
      this.$refs.form.resetFields()

      // 由于provAndCity传给了自定义组件，它们并不是在当前表单中直接
      // 使用的，所以，这里要去做手动清空
      this.form.provAndCity.province = ''
      this.form.provAndCity.city = ''
    },
    // 搜索信息
    hQuery () {
      // 重置页码
      this.form.page = 1
      // 重发请求
      this.loadCompanys()
    },
    // 更改每页显示的条数
    hSizeChange (val) {
      this.form.pagesize = val

      if (this.form.page === 1) {
        this.loadCompanys()
      }
    },
    // 点击某一个页码
    hCurrentChange (curPage) {
      this.form.page = curPage
      this.loadCompanys()
    },

    // 新增用户、编辑用户
    hAddComponey () {
      this.curCompanyId = ''
      this.isShowDialog = true
    },
    hEdit (id) {
      this.curCompanyId = id
      this.isShowDialog = true
    },
    async doDelete (id) {
      try {
        await remove({ id })
        this.$message.success('成功删除了用户!')
        this.loadCompanys()
      } catch (err) {
        this.$message.error('删除失败!')
      }
    },
    // 删除
    hDelete (userId) {
      this.$confirm('此操作将永久删除用户 ' + ', 是否继续?', '提示', {
        type: 'warning'
      })
        .then(() => {
          this.doDelete(userId)
        })
        .catch(() => {
          this.$message.info('已取消操作!')
        })
    },
    async doSwitch (row) {
      var data = {
        id: row.id,
        state: Number(!row.state)
      }
      console.log(data)
      await disabled(data)
        .then(response => {
          this.$message.success('操作成功!')
          this.loadCompanys(this.form)
        })
        .catch(response => {
          this.$message.error(status + '失败!')
        })
    },
    // 启用、禁用
    hSwitchStatus (row) {
      const tip = '已成功' + (row.state ? '禁用' : '启用') + ', 是否继续?'
      this.$confirm(tip, '提示', {
        type: 'warning'
      })
        .then(() => {
          this.doSwitch(row)
        })
        .catch(() => {
          this.$message.info('已取消操作!')
        })
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.alert {
  margin: 10px 0px;
}
.pagination {
  margin-top: 10px;
}
</style>

<style>
.el-table th {
  background-color: #fafafa;
}
.el-table th.is-leaf {
  border-bottom: 2px solid #e8e8e8;
}
.disabled td {
  background-color: #f9f9f9;
  color: #c1c1c1;
}
.disabled .el-button--primary,
.disabled .el-button--danger {
  background-color: #dbdada;
  border: 1px solid #dbdada;
  color: #999;
  cursor: not-allowed;
}
</style>
